
<style type="text/css">

.menu .option {
padding: 5px;
border: solid 1px #D7D5D5;
border-radius: 4px;
cursor: pointer;
background: #eee;
float: left;
margin: 1px;
}
.menu .option.active {
background: rgb(63, 179, 239);
border: solid 1px rgb(54, 142, 215);
}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">

        $(document).ready(function()
        {
          console.log("ojal3");
          $(".option").click(function(){
              
              /*variables*/
              var id = $(this).attr("id");
              
              if($(this).hasClass("desactive")){
                $(this).removeClass( "desactive" ).addClass( "active" );
                if( $("#menu_button").html() == "https://sites.google.com/a/roche.com/gmc/system/app/pages/search?scope=search-site&amp;q=" ){
                  $("#menu_button").html( $("#menu_button").html() + id);
                }else{
                  $("#menu_button").html( $("#menu_button").html() + '+' + id);
                }
              }else{
                $(this).removeClass( "active" ).addClass( "desactive" );
                
                /*vamos a quitar si existe*/
                
                $(this).find(id).each(BorrarDeUrl(id));
                
               /* $(this).find("+" + id){
                  $("#menu_button").html( $("#menu_button").html().text.replace("+" + id, ""));
                }*/
                
                /*$(this).find(id).function({
                  $("#menu_button").html( $("#menu_button").html().replace(id, ""));
                  console.log("lo tiene lo tiene!!!!");
                });*/
                
                
                
                }
              
              
              
             /*$(this).removeClass( "desactive" ).addClass( "active" );
              console.log("ponemos activo");
              var id = $(this).attr("id");
              console.log(id);
              console.log($("#menu_button").html());
              if( $("#menu_button").html() == "https://sites.google.com/a/roche.com/gmc/system/app/pages/search?scope=search-site&amp;q=" )
              {
                $("#menu_button").html( $("#menu_button").html() + id);
                console.log("el link es igual");
              }else{
                $("#menu_button").html( $("#menu_button").html() + '+' + id)  ;
                console.log("el link es diferente");
              }*/
              
              
              
            });
            /*$(".option.active").click(function(){
              $(this).removeClass( "active" ).addClass( "desactive" );
              console.log("quitamos activo");
              console.log($("#menu_button").html());
            });*/
         
            $('#button_go').click(function(){
               window.top.location.href=$("#menu_button").html().replace("&amp;", "&");
            })
          
            function BorrarDeUrl(id) {
              console.log("lo tiene lo tiene!!!!");
              $("#menu_button").html( $("#menu_button").html().replace(id, ""));
              console.log($("#menu_button").html());
            }
          
        });
</script>

 <div class="container_menu">
   <div class="menu">
     <span class="option desactive" id="xxandroid">Android</span>
     <span class="option desactive" id="xxantispam">Anti Spam</span>
     <span class="option desactive" id="xxbestinformed">Best Informed</span>
     <span class="option desactive" id="xxbb">Blackberry</span>
     <span class="option desactive" id="xxbb">BB</span>
     <span class="option desactive" id="xxbb">BB Server</span>
     <span class="option desactive" id="xxgadgets">Chrome Gadgets</span>
     <span class="option desactive" id="xxgadgets">Calendar Gadgets</span>
     <span class="option desactive" id="xxretention">Corporate Retention</span>
     <span class="option desactive" id="xxretention">Janitor</span>
     <span class="option desactive" id="xxediscovery">eDiscovery</span>
     <span class="option desactive" id="xxfireeye">Fire Eye</span>
     <span class="option desactive" id="xxgcal">Google Calendar</span>
     <span class="option desactive" id="xxgcal">gCal</span>
     <span class="option desactive" id="xxchrome">Google Chrome</span>
     <span class="option desactive" id="xxchrome">Chrome</span>
     <span class="option desactive" id="xxcontacts">Google Contacts</span>
     <span class="option desactive" id="xxcontacts">Contacts</span>
     <span class="option desactive" id="xxgdrive">Google Drive</span>
     <span class="option desactive" id="xxgdrive">gDocs</span>
     <span class="option desactive" id="xxgdrive">gDrive</span>
     <span class="option desactive" id="xxgroups">Google Groups</span>
     <span class="option desactive" id="xxgroups">Mail Lists (in gApps)</span>
     <span class="option desactive" id="xxgroups">Dist Lists (in gApps)</span>
     <span class="option desactive" id="xxgmail">Google Mail</span>
     <span class="option desactive" id="xxgmail">Gmail</span>
     <span class="option desactive" id="xxgmail">gMail</span>
     <span class="option desactive" id="xxmapsapi">Google Maps</span>
     <span class="option desactive" id="xxmapsapi">MAPS API</span>
     <span class="option desactive" id="xxsites">Google Sites</span>
     <span class="option desactive" id="xxsites">gSites</span>
     <span class="option desactive" id="xxsites">Sites</span>
     <span class="option desactive" id="xxgtalk">Google Talk</span>
     <span class="option desactive" id="xxgtalk">gTalk</span>
     <span class="option desactive" id="xxgtalk">gChat</span>
     <span class="option desactive" id="xxgplus">Google+</span>
     <span class="option desactive" id="xxgplus">G+</span>
     <span class="option desactive" id="xxgplus">Google Plus</span>
     <span class="option desactive" id="xxhubcas">Hub Cas</span>
     <span class="option desactive" id="xxios">iOS</span>
     <span class="option desactive" id="xxios">iPhone</span>
     <span class="option desactive" id="xxios">iPad</span>
     <span class="option desactive" id="xxmagiccalendar">Magic Calendar</span>
     <span class="option desactive" id="xxmagiccalendar">Magic Meeting Maker</span>
     <span class="option desactive" id="xxmagiccalendar">M3</span>
     <span class="option desactive" id="xxmit">Mass Invitation Tool</span>
     <span class="option desactive" id="xxmit">MIT</span>
     <span class="option desactive" id="xxmailmarshall">Mail Marshall</span>
     <span class="option desactive" id="xxmirapoint">Mira Point</span>
     <span class="option desactive" id="xxmobileiron">Mobile Iron</span>
     <span class="option desactive" id="xxmta">MTA</span>
     <span class="option desactive" id="xxmta">Mail Transfer Agent</span>
     <span class="option desactive" id="xxsms">SMS</span>
     <span class="option desactive" id="xxspam">Spam</span>
     <span class="option desactive" id="xxvault">Vault</span>
     <span class="option desactive" id="xxvault">Google Vault</span>
   </div>
   <div id="menu_button">https://sites.google.com/a/roche.com/gmc/system/app/pages/search?scope=search-site&q=</div>
   <div id="button_go" class="menu option">Pulsame papy</div>
 </div>